<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <link rel="stylesheet" href="./布局.css">
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

</head>
<body>
    <div id="box">
         <div id="container"></div>
        <div class="info">
        <h4>获取地图级别与中心点坐标</h4>
        <p>当前级别：<span id="map-zoom">13.24 西藏布达拉宫</span></p>
        <p>当前中心点：<span id="map-center">121.498586,31.239637</span></p>
        </div>
    </div>
   
    <script src="https://webapi.amap.com/maps?v=2.0&key=5de9515322eb1d1736737f68a619674d"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <script>
       //初始化地图
      var map = new AMap.Map('container', {
        zoom: 13.24, //初始地图级别
        center: [91.116547,29.654416], //初始地图中心点
      });
  
      //显示地图层级与中心点信息
      function logMapinfo(){
        var zoom = map.getZoom(); //获取当前地图级别
        var center = map.getCenter(); //获取当前地图中心位置
  
        document.querySelector("#map-zoom").innerText = zoom;
        document.querySelector("#map-center").innerText = center.toString();
      };
  
      //绑定地图移动与缩放事件
      map.on('moveend', logMapinfo);
      map.on('zoomend', logMapinfo);

      // var map = new AMap.Map('container', {
      //       viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
      //       zoom: 13, //初始化地图层级
      //       center: [91.11766, 29.65716] //初始化地图中心点
      //   });
    </script>



</body>
</html>